<template>
<div>
    <el-menu :default-active="dataForm.status" mode="horizontal" @select="setNav">
        <el-menu-item :index="item.id" v-for="item in status" :key="item.id">{{item.name}}</el-menu-item>
    </el-menu>
    <el-card style="margin-top: 20px;" shadow="never" class="aui-card--fill">
        <div class="query">
            <div class="fm">
                <el-form size="small" :inline="true" label-width="90px" :model="dataForm" @keyup.enter.native="getDataList()">
                    <el-form-item label="订单号：" prop="customizationOrderCode">
                        <el-input v-model="dataForm.customizationOrderCode" clearable placeholder="订单号" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="产品名称：" prop="name">
                        <el-input v-model="dataForm.name" clearable placeholder="产品名称"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0;" label="目的地：">
                        <el-cascader clearable v-model="cascader.destinationId" :props="cascaderProp" :options="dict.region" :show-all-levels="false" @change="setDestinationId"></el-cascader>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0;" label="出发地：">
                        <el-cascader clearable v-model="cascader.departureId" :props="cascaderProp" :options="dict.region" :show-all-levels="false" @change="setDepartureId"></el-cascader>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select v-model="dataForm.status" placeholder="请选择">
                            <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0;" label=" ">
                        <el-button @click="dataFormReset()">重置</el-button>
                        <el-button @click="getDataList()" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="space"></div>
        </div>
    </el-card>
    <el-table size="medium" style="margin-top: 20px;" :data="dataList" v-loading="dataListLoading" :header-cell-style="{background: '#DBEDF6'}" :height="tableHeight">
        <el-table-column prop="customizationOrderCode" label="订单号" header-align="center" align="center" width="180px"></el-table-column>
        <el-table-column label="产品名称" header-align="center" align="center">
            <template slot-scope="scope">
                <span style="color: #3753C6">{{scope.row.name}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="departureList" label="出发地" header-align="center" align="center">
          <template slot-scope="scope">
            <span v-for="item in scope.row.departureList" :key="item.id">{{item.areaName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="destinationList" label="目的地" header-align="center" align="center">
          <template slot-scope="scope">
            <span v-for="item in scope.row.destinationList" :key="item.id">{{item.areaName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="出发时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="backTime" label="回程时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="averageBudget" label="人均预算" header-align="center" align="center"></el-table-column>
        <el-table-column prop="supplierId" width="92" label="协同供应商" header-align="center" align="center"></el-table-column>
<!--        <el-table-column prop="dealPrice" label="成交价格" header-align="center" align="center"></el-table-column>-->
        <el-table-column label="状态" header-align="center" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.status == 'create'">未完成</span>
                <span v-else-if="scope.row.status == 'finish'">已完善</span>
                <span v-else-if="scope.row.status == 'user_cancel' || scope.row.status == 'agency_cancel'">已取消</span>
                <span v-else-if="scope.row.status == 'submit'">已提交</span>
            </template>
        </el-table-column>
        <!-- todo 此状态等待产品重新确定功能需求-->
<!--        <el-table-column label="出团单" header-align="center" align="center">-->
<!--            <template slot-scope="scope">-->
<!--                <span v-if="scope.row.status == 'create'">未完成</span>-->
<!--                <span v-else-if="scope.row.status == 'finish'">已完善</span>-->
<!--                <span v-else-if="scope.row.status == 'cancel'">已取消</span>-->
<!--            </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" width="200" fixed="right" header-align="center" align="center">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row.id)" v-if="scope.row.status == 'create' || scope.row.status == 'submit' || scope.row.status == 'finish'">编辑</el-button>
                <el-button type="text" size="small" @click="cooperate(scope.row.id)" v-if="!scope.row.supplierId && scope.row.status == 'create' || scope.row.status == 'submit' || scope.row.status == 'finish'">协同</el-button>
                <el-button type="text" size="small" @click="submitItem(scope.row.id)" v-if="scope.row.status == 'finish'">提交</el-button>
                <el-button type="text" size="small" @click="checkItem(scope.row.id)" v-if="scope.row.status == 'user_cancel' || scope.row.status == 'agency_cancel'">查看</el-button>
                <!--<el-divider direction="vertical" v-if="scope.row.status == 'finish' || scope.row.status == 'submit'"></el-divider>
                <el-button type="text" size="small" @click="checkItem(scope.row.id)">查看</el-button>
                <el-divider direction="vertical" v-if="scope.row.status == 'finish'"></el-divider>
                <el-button type="text" size="small" @click="checkOutGroup(scope.row.id)" v-if="scope.row.status == 'finish'">查看出行单</el-button>-->
            </template>
        </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
    </el-pagination>
    <!--请求协同-->
    <el-dialog :visible.sync="showCorporateDialog" title="请求协同" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form :model="cooperateForm" ref="cooperateForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
            <el-form-item label="供应商ID" prop="supplierId">
                <el-input type="textarea" v-model="cooperateForm.supplierId" placeholder="供应商ID"></el-input>
            </el-form-item>
        </el-form>
        <template slot="footer">
            <!-- <el-button @click="showCorporateDialog = false">取消</el-button> -->
            <el-button type="primary" @click="submitCooperate()">发送协同</el-button>
        </template>
    </el-dialog>
    <!--出团单-->
    <!-- <el-dialog class="dialog-outgroup" title="发送出团单" :visible.sync="groupVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="1200px">
        <div class="wrapper-form">
            <div class="header">发送出团单</div>
            <el-form size="small" :model="outGroupForm" :rules="outGroupRules">
                <el-form-item label="出团单上传">
                    <el-upload :action="uploadUrl" :headers="uploadHeaders" :on-success="uploadPicSuccess" :show-file-list="false">
                        <img v-if="outGroupForm.outGroup" :src="outGroupForm.outGroup" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <div class="text">上传出团单</div>
                <el-button type="primary" @click="submitGroup">发送</el-button>
            </el-form>
        </div>
    </el-dialog> -->
</div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      outGroupRules: {
        outGroup: [{
          required: true,
          message: '请上传出行单',
          trigger: 'blur'
        }]
      },
      mixinViewModuleOptions: {
        getDataListURL: '/customization/page',
        getDataListIsPage: true
      },
      uploadUrl: '',
      uploadHeaders: '',
      showCorporateDialog: false,
      groupVisible: false,
      dict: {
        category: [],
        region: []
      },
      cascaderProp: {
        value: 'id',
        children: 'cities',
        label: 'name'
      },
      cooperateForm: {
        id: '', // 私人订制id
        supplierId: ''
      },
      outGroupForm: {},
      status: [{
        id: '',
        name: '全部'
      },
      {
        id: 'create',
        name: '未完善'
      },
      {
        id: 'cancel',
        name: '已取消'
      },
      {
        id: 'finish',
        name: '已完善'
      },
      {
        id: 'submit',
        name: '已提交'
      }
      ],
      cascader: {
        destinationId: [],
        departureId: []
      },
      dataForm: {
        status: '',
        category: '',
        name: '',
        departureId: '',
        destinationId: '',
        id: '',
        isOnline: ''
      },
      tableHeight: null
    }
  },
  created () {
    this.getDict()
    this.$nextTick(() => {
      this.tableHeight = document.documentElement.clientHeight - 310
    })
  },
  watch: {
    $route (to, from, next) {
      if (to.name == 'customization-customization') {
        this.getDataList()
      }
    }
  },
  methods: {
    // 上传出团单
    // uploadPicSuccess(res, file, fileList) {
    //     this.outGroupForm.outGroup = res.data.src;
    // },
    // 获取目的地
    setDestinationId (v) {
      this.dataForm.destinationId = v[v.length - 1]
    },
    // 获取出发地
    setDepartureId (v) {
      this.dataForm.departureId = v[v.length - 1]
    },
    // 菜单栏切换
    setNav (idx) {
      this.dataForm.status = idx
      // this.getList();
      this.getDataList()
    },
    // 地址
    getDict () {
      // Promise.all([
      //   this.$http.get("/product/category/list"),
      //   this.$http.get("/sys/region/region")
      // ]).then(values => {
      //   this.dict.category = values[0].data.data;
      //   this.dict.region = values[1].data.data;
      // });
      this.$http.get('/sys/region/region').then(res => {
        if (res.data.code !== 0) {
          this.$message.error(res.data.msg)
        }
        this.dict.region = res.data.data
      })
    },
    checkItem (id) {
      this.$router.push('/customization/detail/' + id)
    },
    dataFormReset () {
      this.dataForm.category = ''
      this.dataForm.departureId = ''
      this.dataForm.destinationId = ''
      this.dataForm.customizationOrderCode = ''
      this.dataForm.name = ''
      this.dataForm.isOnline = ''
      this.dataForm.status = ''
      this.cascader.destinationId = []
      this.cascader.departureId = []
      this.getDataList()
    },
    edit (id) {
      this.$router.push('/customization/detail/' + id)
    },
    dataFormSubmitHandle () {
      // todo -- 接口this.dataForm
      this.showCorporateDialog = false
    },
    cooperate (id) {
      this.showCorporateDialog = true
      this.cooperateForm.id = id
    },
    del (id) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dataListLoading = true
        this.$http.delete('/product/' + id).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.dataListLoading = false
          this.getDataList()
        })
      })
    },
    copy (id) {
      this.dataListLoading = true
      this.$http.post('/product/copy/' + id).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.dataListLoading = false
        this.getDataList()
      })
    },
    submitItem (id) {
      this.dataListLoading = true
      this.$http.put('/customization/submit/' + id).then(res => {
        if (res.data.code !== 0) {
          return this.$message.error(res.data.msg)
        }
        this.$message({
          message: '提交审核成功',
          type: 'success'
        })
        this.dataListLoading = false
        this.getDataList()
      })
    },
    online (id) {
      this.dataListLoading = true
      this.$http.put('/product/online/' + id).then(res => {
        this.$message({
          message: '上线成功',
          type: 'success'
        })
        this.data.loading = false
        this.getDataList()
      })
    },
    // 请求协同
    submitCooperate () {
      const supplierId = this.cooperateForm.supplierId
      const id = this.cooperateForm.id
      const url = `/customization/${id}/supplier/${supplierId}`
      this.$http.put(url).then(res => {
        if (res.data.code !== 0) {
          return thiss.$message.error(res.data.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.showCorporateDialog = false
            this.$emit('refreshDataList')
          }
        })
      })
    }
    /*,
                // 上传出团单
                submitGroup(id) {
                    let url = `/customization/order/outGroup`;
                    let data = {
                        customizationOrderId: id,
                        outGroup: url,
                        outGroupStatus: "ready"
                    };
                    this.$http.put(url, data).then(res => {
                    });
                } */
  }
}
</script>

<style lang="scss" scoped>
.table-hd {
    background: #f00;
}

.query {
    display: flex;

    .fm {
        width: 1340px;
    }

    .space {
        flex: 1;
    }
}
</style>
